<template>
	<view class="wrap u-padding-30">
		<view class="top"></view>
		<view class="payment-info">
			<view class="u-p-t-30 u-p-b-30 bold">订单信息</view>

			<view class="calculation-data">
				<view class="data-title">订单流水号</view>
				<view class="data-text">
					{{payment.serial_code}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">商品总价</view>
				<view class="data-text">
					{{payment.total_amount}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">配送费</view>
				<view class="data-text">
					{{payment.service_fee}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">红包抵扣</view>
				<view class="data-text">
					{{payment.discount_amount}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">实付金额</view>
				<view class="data-text">
					{{payment.paid_amount}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">付款状态</view>
				<view class="data-text">{{stateText(payment.state)}}</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">发货状态</view>
				<view class="data-text">{{deliveryStateText(payment.delivery_state)}}</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">发货方式</view>
				<view class="data-text">{{deliveryTypeText(payment.delivery_type)}}</view>
			</view>
			<template v-if="payment.delivery_type==='delivery'">
				<view class="calculation-data">
					<view class="data-title">收货人</view>
					<view class="data-text">{{payment.addr_name}} {{payment.addr_phone}}</view>
				</view>
				<view class="calculation-data">
					<view class="data-title">收货地址</view>
					<view class="data-text">{{payment.addr_city}}{{payment.addr_district}}{{payment.addr_street}}</view>
				</view>
			</template>
			<template v-if="payment.pickup_code">
				<view class="calculation-data">
					<view class="data-title">提货码</view>
					<view class="data-text">{{payment.pickup_code}}</view>
				</view>
			</template>
			<template v-if="payment.delivery_company">
				<view class="calculation-data">
					<view class="data-title">提货门店</view>
					<view class="data-text">{{payment.delivery_company}}</view>
				</view>
			</template>
		</view>
		
		<view class="goods-list">
			<view class="u-p-t-30 u-p-b-30 bold">商品列表</view>
			<template v-for="(item, index) in payment.goods_list">
				<view class="item">
					<view class="left">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="content u-flex-1">
						<view class="title u-line-2"><view v-if="item.is_gift" class="gift-tag">赠品</view>{{ item.item_name }}</view>
						<view class="type">{{ item.item_remark }}</view>
						<view class="type">{{ item.item_spec }}</view>
					</view>
					<view class="right">
						<view class="price" :class="{'line-through':item.is_gift===1}">
							￥{{item.unit_price}}
						</view>
						<view class="number">x{{ item.quantity }}</view>
					</view>
				</view>
			</template>
		</view>

		<view class="u-text-center" v-if="payment.delivery_state==='pending_pickup'">
			<u-button type="warning" size="medium" @click="completeDelivery">
				<text style="margin-right: .5em;">
					<u-avatar :src="user.avatar" size="50" style="display: flex;"></u-avatar>
				</text><text>确认提货</text>
			</u-button>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				pickup_code: '',
				user: {},
				shop: {},
				payment: {}
			}
		},
		onLoad(options) {
			this.pickup_code = options.pickup_code
			this.getUserInfo()
			this.queryPayment()
		},
		methods: {
			stateText(state) {
				if (state === 'pending_pay') {
					return '待支付'
				}
				if (state === 'paid') {
					return '已支付'
				}
				if (state === 'pending_refund') {
					return '待退款'
				}
				if (state === 'refunded') {
					return '已退款'
				}
				if (state === 'expired') {
					return '已支付超时'
				}
				return state;
			},
			deliveryStateText(deliveryState) {
				if (deliveryState === 'uncertain') {
					return '不确定'
				}
				if (deliveryState === 'complete') {
					return '已完成'
				}
				if (deliveryState === 'store_handling') {
					return '商家配货中'
				}
				if (deliveryState === 'pending_receive') {
					return '待收货'
				}
				if (deliveryState === 'pending_pickup') {
					return '待自提'
				}
				return deliveryState
			},
			deliveryTypeText(type) {
				if (type === 'delivery') {
					return '配送到家'
				}
				if (type === 'pickup') {
					return '门店自提'
				}
				if (type === 'neednot') {
					return '不需要发货'
				}
				return type;
			},
			queryPayment() {
				this.$u.post('/store-manage/query-payment', {
					pickup_code: this.pickup_code,
					query_type: 'pickup_code'
				}).then(res => {
					this.payment = res;
				}).catch(e => {

				})
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
				}).catch(e => {
					console.log(e)
				})
			},
			completeDelivery() {
				this.$u.post('/store-manage/store-delivery', {
					payment_id: this.payment.id,
					pickup_code: this.pickup_code
				}).then(res => {
					uni.showToast({
						title: '提货完成',
						icon: 'success'
					});
					this.queryPayment();
				}).catch(e => {
					console.log(e)
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}

		.payment-info {
			background-color: #FFF;
			padding: 0 30rpx 30rpx 30rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;

			.bold {
				font-weight: bold;
				border-bottom: 1rpx solid #c9c8d2;
			}

			.calculation-data {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-top: 30rpx;
				// margin-bottom: 10rpx;

				.data-title {
					width: 6em;
					font-weight: bold;
				}

				.data-text {
					flex: 1
				}
			}

		}
		
		
	}
	
	.goods-list {
		background-color: #FFF;
		padding: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	
		.bold {
			font-weight: bold;
			border-bottom: 1rpx solid #c9c8d2;
		}
		
		.item-store{
			background: #000;
			color: #fec266;
			padding: 0 10px;
			box-sizing: border-box;
			border-radius: 10rpx;
			position:relative;
			border-bottom-left-radius: 0;
			margin-left:-20rpx;
			margin-right: -20rpx;
			margin-top: -2px;
			font-weight: bold;
			font-size: 24rpx;
			line-height: 1.8;
			margin-bottom: -10rpx;
			border-bottom-right-radius: 0;
			&::after{
				content: '';
				position: absolute;
				bottom: -20rpx;
				left: 0;
				width: 0;
				height: 0;
				border-bottom-left-radius: 5px;
				border-left: 20rpx solid #000;
				border-bottom: 20rpx solid transparent;
			}
		}
	
		.item {
			display: flex;
			margin: 30rpx 0;
			&:last-child{
				margin-bottom: 0;
			}
	
			.left {
				margin-right: 20rpx;
	
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
			}
	
			.content {
				margin: 0;
				.title {
					font-size: 28rpx;
					line-height: 1.2em;
					margin-bottom: 0;
				}
	
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: goldenrod;
				}
	
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
	
			.right {
				margin-left: 10rpx;
				// padding-top: 20rpx;
				text-align: right;
	
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
	
				.number {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
			}
		}
	
		.calculation-data {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 30rpx;
	
			.data-title {
				font-weight: bold;
			}
		}
	
		.u-line {
			margin-top: 30rpx !important;
		}
	
		.data-sum {
			padding-top: 30rpx;
			width: 100%;
			text-align: right;
	
			.red {
				color: red;
				padding-left: 10rpx;
				padding-right: 10rpx;
			}
	
			.bold {
				font-size: 36rpx;
			}
		}
	}
	
	.gift-tag{
		display:inline-block;
		background-color: red;
		color: #fff;
		border-radius: 4px;
		font-size: .8em;
		padding: 0 10rpx;
		line-height: 1.5;
		margin-right: .5em;
	}
	.line-through{
		text-decoration: line-through;
	}
</style>
